#{extends 'main_root.html' /}

#{set 'moreTemplates'}
<script id="message-template" type="text/template">
	    <div class="alert-message <%= type %>">
		    <a class="close" href="#">&times;</a>
		    <p><%= strong ? "<strong>"+strong+"</strong> " : ""%><%= message %></p>
			
	    </div>
    	</script>
    	
    	 <script id="confirmationMessage-template" type="text/template">
	    <div class="alert-message <%= type %>">
		    <a class="close" href="#">&times;</a>
		    <p><%= strong ? "<strong>"+strong+"</strong> " : ""%><%= message %></p>
			<div class="alert-actions">
				<a name="confirmation" class="btn small confirmation" href="#">Confirm</a>
				<a name="cancel" class="btn small cancel" href="#">Cancel</a>
			</div>
	    </div>
    	</script>

<script id="residences-list-template" type="text/template">
 <div class="actions">
  <button name="add" class="btn primary">Add</button>
 </div>
        
 <div class="unstyled list">
 </div>
 <div class="pagination">
  <ul>
   <li class="prev <%= !pagination.prev ? "disabled" : "" %>"><a <%= pagination.prev ? "class=page" : "" %> data-id="<%= pagination.prev %>">&larr; Previous</a></li>
   <% for(page in pagination.range) { %>
   <li <%= pagination.page == pagination.range[page] ? "class=active" : "" %>><a class="page"  data-id="<%= pagination.range[page] %>"><%= pagination.range[page] %></a></li>
   <% } %>
   <li class="next <%= !pagination.next ? "disabled" : "" %>"><a <%= pagination.next ? "class=page" : "" %> data-id="<%= pagination.next %>">Next &rarr;</a></li>
  </ul>
  <span>Total:</span> <%= pagination.total ? pagination.total : 0 %>
 </div>
</script>

<script id="residence-item-template" type="text/template">
 <div  class="row">
  <div class="span8 resume">
   <%= data.get("name") %>
  </div>
  <div class="span6">
   <a href="#/edit/<%= data.get("id") %>"></a>
  </div>          
  <div class="span6 action">
   <button name="edit" class="btn small edit">Edit</button>
   <button name="delete" class="btn small delete">Delete</button>
  </div>
  <div class="span16 detail">
   <h3>Admin data</h3>
   <% if(data.get("admin")) { %>
   <p>Username: <%= data.get("admin").username %></p>
   <% } %>
  </div>
 </div>
 <hr/>
</script>

<script id="residence-editor-template" type="text/template">
 <form>
  <fieldset>
   <legend>Residence data</legend>
	<input id="residence_id" name="residence.id" type="hidden" value="<%= residence.get("id") ? residence.get("id") : ''%>"/>
	<div class="clearfix">
     <label for="residence_name">Name</label>
     <div class="input">
      <input id="residence_name" name="residence.name" type="text" value="<%= residence.get("name") ? residence.get("name") : ''%>"/>
      <span class="help-inline"></span>
     </div>
    </div>
  </fieldset>
 <% if(residence.get("id")) { %>
  <fieldset>             
   <legend>Residence's admin data</legend>		
   <input id="user_id" name="user.id" type="hidden" value="<%= admin.id ? admin.id : ''%>"/>	
   <div class="clearfix">
    <label for="user_uername">Username</label>
    <div class="input">
     <input id="user_username" name="user.username" type="text" value="<%= admin.username ? admin.username : ''%>"/>
     <span class="help-inline"></span>
    </div>
   </div>
   <div class="clearfix">
    <label for="user_password">Password</label>
    <div class="input">
     <input id="user_password" name="user.password" placeholder="********" type="password" value=""/>
     <span class="help-inline"></span>
    </div>
   </div>
   <div class="clearfix">
    <label for="user_active">Active</label>
    <div class="input">
     <input id="user_active" name="user.active" type="checkbox" checked="checked" value="">
     <span class="help-inline"></span>
    </div>
   </div>            
  </fieldset> 
 <% } %>          
  <div class="actions">
   <a name="save" class="btn primary">Save</a>
   <a name="back" class="btn">Back</a>
  </div>
 </form>
</script>
#{/set}

#{set 'rootScripts'}

<script type="text/javascript">        
    var Actions = {
    	residences:                    #{jsAction @root.ResidenceController.list() /},
    };
	
	Message = Backbone.Model.extend({
            	defaults: {
            		"type":		"info",
            		"strong":	"",
            		"message":	"This is a default message",
            	},
            });
            
        	Messages = Backbone.Collection.extend({
            	model: Message,
            });
        	
        	MessagesBox = Backbone.View.extend({

            	initialize: function() {
            		this.collection.bind("add", this.render, this);
            	},

            	render: function() {
            		console.log("MessagesBox-render");
                	var self = this;
                	$("#messages_box").html("");
                	this.collection.each(function(message) {
                    	var messageView = message.get("actions") ? new MessageConfirmationItem({model: message}) : new MessageItem({model: message});
                    	$("#messages_box").append(messageView.render().el);
                    });
                    this.collection.reset();
                	return this;
                },

                clear: function() {
                    console.log("MessagesBox -> clear");
                    $("messages_box").html("");
                }
            });

			MessageItem = Backbone.View.extend({
				tagName: "div",
				template: _.template($("#message-template").html()),
				//displayLength: 5000,
				
				events: {
					"click .close":		"close",
				},
				
				initialize: function() {
					this.className = "alert-message " + this.model.get("type");
				},
				
				render: function() {
					//$(this.el).hide();
					$(this.el).html(this.template(this.model.toJSON()));
					//$(this.el).slideDown();
					//var self = this;
					//$.doTimeout(this.displayLength, function() {
			        //	$(self.el).slideUp();
			        //    $.doTimeout(2000, function() {
			        //        self.close();
			        //    });
			       	//});
				        
					return this;
				},

				close: function() {
					console.log("close!!!");
					$(this.el).remove();
				}
				
			});
			
			MessageConfirmationItem = MessageItem.extend({
				template: _.template($("#confirmationMessage-template").html()),
				/*events: function() {
						var events = {
							"click .close":		"close",
						};
						
						for(var counter=0; counter < this.model.get("actions").length; counter++) {
							var action = this.model.get("actions")[counter];
							this[counter+"_out"] = action.fn;
							console.log(this);
							_.bind(action.fn, this);
							events["click ."+ action.type] = counter+"_out";
						}
						return events;
					},*/
				events: {
					"click .close":						"close",
					"click a[name=confirmation]":		"confirmation",
					"click a[name=cancel]":				"close",
				},

				initialize: function() {
					this.className = "alert-message " + this.model.get("type");
				},
				
				confirmation: function(e) {
					console.log("Confirmation!!!");
					var goalModel = this.model.get("element");
					//console.log(goalModel);
					goalModel.trigger("confirmation");
					e.stopPropagation();
					this.close();
				},

				createFn: function(fn) {
					var self = this;
					return function() {
						console.log("Create fn: " + fn);
						if(fn) fn();
						self.close();
					}
				},
			});
			
			var messages = new Messages();
	
	$(document).ready(function(){
		var rootModule = ideon.module("root");
	    router = new rootModule.Router.RootRouter();
	    var box = new MessagesBox({collection : messages});
		Backbone.history.start();
	});
</script>
<script src="@{'/public/javascripts/batzen/root.js'}" type="text/javascript"></script>
#{/set}

<div id="messages_box" class="messages"></div>
<div id="app">
	
</div>
	

       

